<template>
	<view class="home-page">
		<view class="header-box">
			<view class="set-box">
				设置<view class="set-icon el-icon-ali-set" @click="toSetPage"></view>
			</view>
			<view class="user-info-box">
				<view class="user-info-container">
					<view class="color-box"></view>
					<view class="user-info-content">
						<view class="info-box">
							<image class="header-img" v-if="homeData.headimgurl" :src="homeData.headimgurl" mode=""></image>
							<image class="header-img" v-else src="../../static/img/wx_login.png" mode=""></image>
							<view class="phone-name">
								<text class="name">{{ homeData.true_name }}</text>
								<text class="phone">{{ homeData.phone }}/{{ homeData.code }}</text>
							</view>
							<view class="referrer-id" v-if="homeData.bind_push_code">推荐人ID：{{ homeData.bind_push_code }}</view>
						</view>
						<view class="notice-box">
							<view class="uni-padding-wrap">
								<view class="uni-swiper-msg">
									<view class="uni-swiper-msg-icon"><view class="notice-icon el-icon-ali-notice"></view></view>
									<swiper class="notice-swiper" autoplay="true" circular="true" interval="5000">
										<swiper-item v-for="(notice, noticeIndex) in homeData.notice_list" :key="noticeIndex">
											<navigator @click="toNoticePage(notice.id)">{{ notice.title }}</navigator>
										</swiper-item>
									</swiper>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="assets-box">
			<!-- <view class="box-title">我的钱包</view>
			<view class="money-box">
				<view class="commission-box" @click="toMoneyPage(2)">
					<view class="title">我的佣金</view>
					<view class="money">{{ homeData.commission }}</view>
				</view>
				<view class="capital-box"  @click="toMoneyPage(1)">
					<view class="title">我的本金</view>
					<view class="money">{{ homeData.capital }}</view>
				</view>
			</view> -->
			<view class="income-icon">
				<view class="today-box">
					<view class="title">今日积分</view>
					<view class="money">{{ homeData.today_income ? homeData.today_income : 0 }}</view>
				</view>
				<view class="grand-total-box">
					<view class="title">累计积分</view>
					<view class="money">{{ homeData.push_income ? homeData.push_income : 0 }}</view>
				</view>
			</view>
		</view>
		<view class="my-orders-box">
			<view class="box-title">销售订单</view>
			<view class="orders-detail-box">
				<view class="orders-type-box">
					<view class="title">1天累计</view>
					<view class="number">{{ homeData.threeDaysCount }}/{{ homeData.threeCanCount }}</view>
				</view>
				<view class="orders-type-box">
					<view class="title">7天累计</view>
					<view class="number">{{ homeData.sevenDaysCount }}/{{ homeData.sevenCanCount }}</view>
				</view>
				<view class="orders-type-box">
					<view class="title">30天累计</view>
					<view class="number">{{ homeData.monthDaysCount }}/{{ homeData.monthCanCount }}</view>
				</view>
			</view>
		</view>
		<view class="page-footer">
			<view class="orders-title" v-if="homeData.orders_status == 1">{{nums}}</view>
			<view class="orders-title" v-else>&ensp;</view>
			<button class="orders-btn"  type="default" @click="openCloseGetOrder()">{{homeData.orders_status == 1 ? '停止接单':'开始接单'}}</button>
    </view>
    <view class="page-notice">
      <view class="title">以下是平台红线，为避免出现售后及无法接单问题，请详细阅读：</view>
      <view class="notice-content">1，遇到问题请联系上级或者平台客服，严禁任何敏感性的词语骚扰商家！！！</view>
      <view class="notice-content">2，严禁使用各种返利套包行为。</view>
      <view class="notice-content">3，请勿随意更改关键词，拍立淘，一经发现直接永封处理！！</view>
    </view>
		<u-modal
				:showModal="isShowModal"
				title="提示"
				confirmColor="#333"
				@cancleModal="isShowModal = false"
				@confirmModal="confirmModal">
			<view>
				<text v-if="modalType == 'jdBind'">您尚未绑定京东账号，马上前往绑定？</text>
				<text v-if="modalType == 'wphBind'">您尚未绑定唯品会账号，马上前往绑定？</text>
				<text v-if="modalType == 'pddBind'">您尚未绑定拼多多账号，马上前往绑定？</text>
				<text v-if="modalType == 'douyinBind'">您尚未绑定抖音账号，马上前往绑定？</text>
				<text v-if="modalType == 'bankBind'">您尚未完善银行卡个人信息，马上前往完善？</text>
				<text v-if="modalType == 'tbAuth'">{{tbAuthText}}</text>
			</view>
		</u-modal>
		<u-modal :showModal="showNotice"
				 title="公告"
				 :autoClose="false"
				 :showCancel="false"
				 :confirmColor="confirmColor"
				 :confrimTitle="noticeTitle"
				 @confirmModal="onHideNotice">
			<view id="notice-detail">
				<view class="titie">
					{{detailData.title}}
				</view>
				<view class="time">
					{{detailData.create_time}}
				</view>
				<view class="content">
          <text class="html-text-box" v-html="detailData.content"></text>
				</view>
			</view>
		</u-modal>
		<u-modal
				:showModal="$store.getters.urgeDialogFlag && $store.getters.urgeDialogNum != 0"
				title="催收消息"
				:autoClose="false"
				:showCancel="false"
				confirmColor="#000"
				confrimTitle="查看消息"
				@confirmModal="toMessageDetail">
			<view id="urge-detail">
				你有<text>{{" " + $store.getters.urgeDialogNum + " "}}</text>个订单<text>{{" "}}未确认收货</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
import {
	apiNoticeDetail,
	apiInquiryWaitOperateTask,
	apiBindCid,
	apiGetCityInfo,
	apiPushIndex,
	apiCommissionCapitalCash,
	apiWeChatOfficialAccount,
	apiOpenCloseGetOrder
} from '../../../http/apis.js';
import { mapState } from 'vuex';
import uModal from '../../components/uni-modal/uni-modal.vue';
import md5 from 'js-md5';

export default {
	components: {
		uModal
	},
	computed: {
		...mapState(['token'])
	},
	data() {
		return {
			detailData:{
				title:'',
				create_time:'',
				content:'',
			},
			showNotice:false,
			homeData: {},
			loading: false,
			isAcceptTask: false,
			isShowModal: false,
			modalType: '',
			hour: 0,
			minute: 0,
			second: 0,
			nums: '00:00:00',
			timer: null,
			authType: 'init',
			tbAuthText: '',
			noticeTitle:'确认（3秒）',
			noticeNum:3,
			confirmColor:'#999999',
			showNTimer:null
		};
	},
	onLoad: function(option) {
		uni.$on('reload',function(data){
			window.location.reload()
		})
	},
	onShow() {
		this.isAcceptTask = false;
		if (this.token == '') {
			uni.navigateTo({
				url: '../login/login'
			});
		} else {
			uni.showLoading({
				title: '加载中'
			});
			uni.request({
				url:this.GLOBAL.BASE_URL+'baseapi/pushbase/modelInfo',
				method:'post',
				success: res => {
					uni.setStorageSync('merchantMoneyText', res.data.msg.merchant_moneyText);
				},
			});
			this.getMobilePlatformType()
			this.bindCid()
			this.getPushIndex();

		}
	},
	onUnload(){
		this.noticeTitle='确认'
		this.onHideNotice()
	},
	onHide(){
		this.noticeTitle='确认'
		this.onHideNotice()
	},
	methods: {
		// 去消息列表页面
		toMessageDetail() {
			uni.switchTab({
				url: "../notice/noticeList"
			})
		},
		onHideNotice(){
			if(this.noticeTitle!=='确认') return
			this.showNotice=false
			if(this.showNTimer){
				clearInterval(this.showNTimer)
			}
			this.showNTimer=null
			this.confirmColor='#999999'
			this.noticeTitle='确认（3秒）'
			this.noticeNum=3
			if (this.$store.getters.urgeDialogNum != 0) {
				// 展示催收订单模态框
				this.$store.commit("setUrgeDialogFlag", true)
			}
		},
		getNoticeDetail(id){
			apiNoticeDetail({
				token: this.token,
				noticeId: id
			}).then(res =>{
			    if(res.data.code == 1)  {
					this.detailData = res.data.msg
					// 存储未查看催收订单的数量
					// this.$store.commit("setUrgeDialogNum", 1)
					if (res.data.msg.urge_msg_qty != 0) {
						this.$store.commit("setUrgeDialogNum", res.data.msg.urge_msg_qty || 0)
					}
			    // 是否展示公告消息模态框
			    if (!this.$store.getters.urgeDialogFlag) {
					this.showNotice=true
				}
					this.showNTimer=setInterval(()=>{
						this.noticeNum=this.noticeNum-1
						this.noticeTitle=`确认（${this.noticeNum}秒）`
						if(this.noticeNum===0){
							// this.showNotice=false
							clearInterval(this.showNTimer)
							this.showNTimer=null
							this.confirmColor=''
							this.noticeTitle='确认'
							this.noticeNum=3
						}

					},1000)
				}
			}).catch(res => {
				console.log(res)
				this.$msg.showToast(res.data.msg)
			})
		},
		getPushIndex() {
			clearInterval(this.timer);
			apiPushIndex({
				token: this.token
			})
				.then(res => {
					if (res.data.code == 1) {
						uni.hideLoading();
						this.homeData = res.data.msg;
						if (this.homeData.tb_status == 2027) {
							uni.navigateTo({
								url: '../bindInfo/bindTbAccountxl?type=init'
							});
							return
						}
						if(this.homeData.notice_list && this.homeData.notice_list.length>0){
								this.getNoticeDetail(this.homeData.notice_list[0].id)
						}
						this.getWeChatOfficialAccount('init',0)
						if (this.homeData.orders_status == 2) {
							this.isAcceptTask = false;
							// this.inquiryWaitOperateTask()
						} else {
							//点击开始接单存入数据库的时间
							let openTime = this.homeData.open_time;
							let currentTime = new Date();
							currentTime = Math.floor(currentTime.getTime() / 1000);
							//获取开始接单到现在的时间
							var timestamp = currentTime - openTime;
							var remain = timestamp % 86400;
							this.hour = parseInt(remain / 3600);
							//计算分钟数
							remain = remain % 3600;
							this.minute = parseInt(remain / 60);
							//计算秒数
							this.second = remain % 60;
							//计时
							this.hourMeter();
						}
					}
				})
				.catch(res => {
					uni.hideLoading();
					this.$msg.showToast(res.data.msg);
				});
		},
		isWechat() {
			return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger';
		},
		getWeChatOfficialAccount(entrance,type){
			apiWeChatOfficialAccount({
			    token: this.token
			}).then(res =>{
			    if(res.data.code == 1)  {
					if(res.data.allNumStatus == 2){
						//是否授权
						if (res.data.msg.authorize == 2){
							if (this.isWechat()) {
								let appid = res.data.msg.appid
                // 没有前置机时
								// let link = this.GLOBAL.MAIN_URL + 'pages/homeWxAuth/homeWxAuth?appId=' + appid
                // 有前置机时
                let link = this.GLOBAL.WX_CALLBACK + 'baseapi/push/bindWeChat?appId=' + appid
								let uri = encodeURIComponent(link);
								let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
								window.location.href = authURL;
							} else {
								this.$msg.showToast('请到微信上打开该平台')
							}
						} else {
							if(res.data.msg.attention == 2) {
								this.$msg.showToast('请先关注公众号')
								setTimeout(() => {
									uni.navigateTo({
										url: '../attentionPublic/attentionPublic'
									});
								}, 1000);
							}
						}

					}
					if(res.data.allNumStatus == 1){
						if(entrance == 'money'){
							uni.navigateTo({
								url: '../money/fundsDetail?type=' + type
							});
						}
					}
				} else {
					this.$msg.showToast(res.data.msg)
				}
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
		},
		getMonDay() {
			var d = new Date();
			//d.getMonth()+1月份索引从0开始,天数索引从1开始，第0天即代表最后一天
			var allDays = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
			return allDays;
		},
		hourMeter() {
			var that = this;
			this.timer = setInterval(() => {
				that.second = that.second + 1;
				if (that.minute >= 60) {
					that.minute = 0;
					that.hour = that.hour + 1;
				} else if (that.second >= 60) {
					that.second = 0;
					that.minute += 1;
				}
				if (that.second % 40 === 0) {
                    // console.log(that.second,that.second % 15);
					that.inquiryWaitOperateTask();
				}
				that.nums = that.spliceTime(that.hour) + ':' + that.spliceTime(that.minute) + ':' + that.spliceTime(that.second);
			}, 1000);
		},
		spliceTime(time) {
			if (time < 10) {
				time = '0' + time;
			}
			return time;
		},
		toMoneyPage(type){
			apiCommissionCapitalCash({
				token: this.token,
				type: type
			}).then(res => {
				if(res.data.code == 1){
					this.getWeChatOfficialAccount('money',type)
					// uni.navigateTo({
					// 	url: '../money/fundsDetail?type=' + type
					// });
				} else if (res.data.code == 2012 || res.data.code == 2013) {
				    this.$msg.showToast('请先绑定个人信息');
					setTimeout(() => {
						uni.navigateTo({
							url: '../bindInfo/bindInfo'
						});
					}, 1000);
				} else {
					this.$msg.showToast(res.data.msg);
				}
			})
			.catch(res => {
				this.$msg.showToast(res.data.msg);
			});
		},
		confirmModal() {
			this.isShowModal = false;
			if (this.modalType == 'pddBind') {
				uni.navigateTo({
					url: '../bindAccount/pddAccount'
				});
			} else if (this.modalType == 'jdBind') {
				uni.navigateTo({
					url: '../bindAccount/jdAccount'
				});
			} else if (this.modalType == 'wphBind') {
				uni.navigateTo({
					url: '../bindAccount/wphAccount'
				});
			} else if (this.modalType == 'bankBind') {
				uni.navigateTo({
					url: '../bindInfo/bindBank'
				});
			} else if (this.modalType == 'tbAuth') {
        uni.navigateTo({
          url: '../bindAccount/tbAccount?type=1'
        });
				// uni.navigateTo({
				// 	url: '../bindInfo/bindTbAccountxl?type=' + this.authType
				// });
			} else if (this.modalType == 'douyinBind') {
        uni.navigateTo({
          url: '../bindAccount/tiktokAccount'
        });
      }
		},
		toNoticePage(id) {
			uni.navigateTo({
				url: '../notice/noticeDetail?id=' + id + '&type=0'
			});
		},
		toSetting() {
			uni.navigateTo({
				url: '../set/set'
			});
		},
		openCloseGetOrder() {
			clearInterval(this.timer);
			this.hour = 0;
			this.minute = 0;
			this.second = 0;
			this.nums = '00:00:00';
      let time = Date.parse(new Date()) / 1000
			apiOpenCloseGetOrder({
				token: this.token,
        sign: md5(this.GLOBAL.SIGN_KEY + time),
        time,
			})
				.then(res => {
					if (res.data.code == 1) {

						if (res.data.xa_status == 1) {
							this.isShowModal = true;
							this.modalType = 'tbAuth';
							this.authType = 'again'
							this.tbAuthText = '请用原来绑定的淘宝号进行重新授权'
							return
						}
						if (res.data.again_status == 1) {
							this.isShowModal = true;
							this.modalType = 'tbAuth';
							this.authType = 'again'
							this.tbAuthText = '您绑定的淘宝号异常，请用新号换绑'
							return
						}
						if (res.data.pdd_status == 1) {
							this.isShowModal = true;
							this.modalType = 'pddBind';
							return;
						}
						if (res.data.jd_status == 1) {
							this.isShowModal = true;
							this.modalType = 'jdBind';
							return;
						}
						if (res.data.wph_status == 1) {
							this.isShowModal = true;
							this.modalType = 'wphBind';
							return;
						}
						if (res.data.bank_status == 1) {
							this.isShowModal = true;
							this.modalType = 'bankBind';
							return;
						}

            if (res.data.tiktok_status == 1) {
              this.isShowModal = true;
              this.modalType = 'douyinBind';
              return;
            }

            if (this.homeData.orders_status == 1) {
              this.homeData.orders_status = 2;
              this.$msg.showToast('停止接单');
            } else {
              this.homeData.orders_status = 1;
              this.$msg.showToast('开始接单');
              this.hourMeter();
              this.inquiryWaitOperateTask();
              this.doGetLocation();
              // this.getLocation()
            }
					} else {
						if (res.data.code == 2013) {
							this.$msg.showToast('请先完善银行卡个人信息');
							setTimeout(() => {
								uni.navigateTo({
									url: '../bindInfo/bindInfo'
								});
							}, 1000);
						}
						else if (res.data.code == 2020 || res.data.code == 2022 || res.data.code == 2028) {
							this.$msg.showToast(res.data.msg);
							setTimeout(() => {
								uni.navigateTo({
									url: '../bindInfo/bindInfo'
								});
							}, 1000);
						} else {
							this.$msg.showToast(res.data.msg);
						}
					}

				})
				.catch(res => {
					this.$msg.showToast(res.data.msg);
				});
		},
		doGetLocation() {
			uni.getLocation({
				success: res => {
					apiGetCityInfo({
						token: this.token,
						longitude: res.longitude,
						latitude: res.latitude
					})
						.then(res => {})
						.catch(res => {
							this.$msg.showToast(res.data.msg);
						});
				},
				fail: err => {
					// uni.showToast({ title: err.errMsg, duration: 5000, icon: 'none' });
					console.log(err);
				}
			});
		},
		inquiryWaitOperateTask() {
			if (this.isAcceptTask) {
				return;
			}
			apiInquiryWaitOperateTask({
				token: this.token
			})
				.then(res => {
					if (res.data.code == 1) {
						this.isAcceptTask = true;
						clearInterval(this.timer);
						uni.navigateTo({
							url: '../task/task'
						});
					}
				})
				.catch(res => {
					this.$msg.showToast(res.data.msg);
				});
		},
		bindCid() {
			if (uni.getStorageSync('mobilePlatformType') == 'APP') {
				let webview = plus.webview.currentWebview();
				apiBindCid({
					token: this.token,
					cid: webview.cid
				})
				.then(res => {

				})
				.catch(res => {
					this.$msg.showToast(res.data.msg);
				});
			}
		},
		getMobilePlatformType() {
			try {
				let webview = plus.webview.currentWebview();
				uni.setStorageSync('mobilePlatformType', webview.mobilePlatformType);
			} catch (e) {
				uni.setStorageSync('mobilePlatformType', 'H5');
			}
		},
		toSetPage(){
			uni.navigateTo({
				url:'../set/set'
			})
		}
	}
};
</script>

<style lang="scss">
	.home-page {
		.header-box {
			width: 100%;
			height: 260upx;
			background: $theme-background-color;
			position: relative;
			.set-box {
				position: absolute;
				right: 30upx;
				top: 30upx;
				color: rgba(251, 244, 241, 1);
				font-size: 34upx;

			}
			.set-icon {
				font-size: 40upx;
				color: rgba(251, 244, 241, 1);
				display: inline-block;
				vertical-align: text-top;
				margin-left: 10upx;
			}
			.user-info-box {
				height: 220upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
				border-radius: 10px;
				position: absolute;
				top: 110upx;
				left: 32upx;
				right: 32upx;
				.user-info-container {
					position: relative;
					.color-box {
						width: 400upx;
						height: 220upx;
						background: $theme-color;
						opacity: 0.05;
						border-bottom-right-radius: 75%;
					}
					.user-info-content {
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						.info-box {
							display: flex;
							align-items: center;
							.header-img {
								margin: 20upx 12upx 0upx 32upx;
								width: 104upx;
								height: 104upx;
								border-radius: 50%;
								background: #FFFFFF;
							}
							.phone-name {
								margin-top: 20upx;
								display: flex;
								flex-direction: column;
								justify-content: space-around;
								height: 104upx;
								box-sizing: border-box;
								.name {
									font-size: 34upx;
									font-family: PingFangSC-Semibold, PingFang SC;
									font-weight: 600;
									color: rgba(51, 51, 51, 1);
									line-height: 34upx;
								}
								.phone {
									font-size: 28upx;
									font-family: PingFang-SC-Medium, PingFang-SC;
									font-weight: 500;
									color: rgba(51, 51, 51, 1);
									line-height: 28upx;
								}
							}
							.referrer-id {
								font-size: 24upx;
								font-family: PingFang-SC-Medium, PingFang-SC;
								font-weight: 500;
								color: rgba(153, 153, 153, 1);
								line-height: 34upx;
							}
						}
						.notice-box {
							height: 60upx;
							font-size: 24upx;
							overflow: hidden;
							margin-top: 30upx;
							.uni-swiper-msg-icon {
								display: inline-block;
								margin-left: 32upx;
								vertical-align: top;
								margin-top: 6upx;
								.notice-icon {
									font-size: 46upx;
									display: inline-block;
									color: $theme-color;
								}
							}
							.notice-swiper {
								display: inline-block;
								width: 85%;
								margin-left: 16upx;
								line-height: 60upx;
								font-size: 40upx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: rgba(255, 80, 0, 1);
							}
						}
					}
				}
			}
		}
		.assets-box {
			margin: 90upx 32upx 20upx 32upx;
			padding: 24upx 32upx 32upx 32upx;
			// height:205px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.1);
			border-radius: 20upx;
			.box-title {
				font-size: 32upx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 32upx;
				padding-bottom: 24upx;
				border-bottom: 1px solid #f8f8f8;
				font-family: PingFangSC-Medium, PingFang SC;
			}
			.title {
				font-size: 30upx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 30upx;
				font-family: PingFangSC-Regular, PingFang SC;
			}
			.money-box {
				display: flex;
				padding: 24upx 0;
				border-bottom: 1px solid #f8f8f8;
				.money {
					font-size: 48upx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					line-height: 48upx;
					margin-top: 24upx;
				}
				.commission-box {
					flex: 1;
					.money {
						color: rgba(51, 51, 51, 1);
					}
				}
				.capital-box {
					flex: 1;
					.money {
						color: rgba(146, 146, 146, 1);
					}
				}
			}
			.income-icon {
				display: flex;
				padding-top: 24upx;
				text-align: center;
				.money {
					font-size: 30upx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: rgba(146, 146, 146, 1);
					line-height: 28upx;
					margin-top: 24upx;
				}
				.today-box,
				.grand-total-box {
					flex: 1;
				}
			}
		}
		.my-orders-box {
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.1);
			border-radius: 20upx;
			padding: 24upx 32upx 32upx 32upx;
			margin: 0 32upx;
			.box-title {
				font-size: 32upx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 32upx;
				padding-bottom: 24upx;
				border-bottom: 1px solid #f8f8f8;
				font-family: PingFangSC-Medium, PingFang SC;
			}
			.orders-detail-box {
				display: flex;
				margin-top: 24upx;
				text-align: center;
				.orders-type-box {
					flex: 1;
					.title {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 30upx;
					}
					.number {
						font-size: 30upx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: rgba(146, 146, 146, 1);
						line-height: 30upx;
						margin-top: 24upx;
					}
				}
			}
		}
    .page-notice {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.1);
      border-radius: 20upx;
      padding: 24upx 32upx 32upx 32upx;
      margin: 0 45upx;
      .title {
        font-size: 35upx;
        font-weight: 500;
        color: red;
        line-height: 48upx;
        padding-bottom: 24upx;
        border-bottom: 1px solid #f8f8f8;
        font-family: PingFangSC-Medium, PingFang SC;
      }
      .notice-content{
        font-size: 30upx;
        line-height: 48upx;
        font-weight: 500;
        padding-bottom: 24upx;
        border-bottom: 1px solid #f8f8f8;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #bd2c00;
      }
    }
		.page-footer {
			.orders-title {
				text-align: center;
				font-size: 32upx;
				color: $theme-color;
				margin-top: 32upx;
				height: 60upx;
				line-height: 60upx;
			}
			.orders-btn {
				margin: 32upx;
				height: 96upx;
				background: $theme-background-color;
				border-radius: 10upx;
				font-size: 32upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 96upx;
			}
		}
	}
	#notice-detail {
			background: white;
			overflow: auto;
			min-height: 45vh;
			max-height: 55vh;
			.titie {
				font-weight: 600;
				padding: 0upx 32upx 40upx 32upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 400;
				// line-height: 30px;
				color: #333;
				opacity: 1;
			}

			.time {
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32upx;
				color: #999;
				opacity: 1;
				padding: 0upx 32upx 30upx 32upx;

			}

			.content {
				padding: 0px 32upx;
				-webkit-user-select: text;
			}
		}

	#urge-detail {
		height: 150upx;
		line-height: 150upx;
		text-align: center;
		font-size: 36upx;
		text {
			color: red;
		}
	}
</style>
